<template>
  <view class="edit-usin-cont">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="userInfo.avatar?userInfo.avatar:defaultAvatar" mode="widthFix"></image>
    </button>
    <form @submit="saveHandler">
      <input type="nickname" class="weui-input" placeholder="请输入昵称" name="nickname" :value="userInfo.nickName?userInfo.nickName:''"/>
      <button type="primary" class="btn-save" form-type="submit">保存</button>
    </form>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    computed: {
      ...mapState('m_user', ["defaultAvatar", "defaultNickName",'userInfo']),
    },
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('m_user', ['updateAvatar', 'updateNickName']),
      //用户点击了头像
      onChooseAvatar(e) {
        // 更新头像
        this.updateAvatar(e.detail.avatarUrl);
      },
      //用户点击了保存按钮
      saveHandler(e) {
        //将微信昵称保存在vuex
        this.updateNickName(e.detail.value.nickname);
        
        uni.navigateBack();
      },
    },
  }
</script>

<style lang="scss">
  .edit-usin-cont {
    height: 240px;
    background-color: #e8e8e8;
    padding-top: 10px;

    .avatar-wrapper {
      padding: 0;
      background-color: transparent;
      margin-bottom: 10px;

      &::after {
        border: none;
      }

      .avatar {
        width: 200rpx;
        border-radius: 50%;

      }
    }

    .weui-input {
      height: 35px;
      font-size: 30rpx;
      padding-left: 5px;
      color: black;
      background-color: white;
    }

    .btn-save {
      width: 64%;
      margin-top: 10px;
    }
  }
</style>